import React from 'react'
import {
  Form,
  Input,
  Button,
  Table,
  Divider,
  Modal,
  Popconfirm,
  message
} from 'antd'
import _ from 'lodash'
import {
  projectFindBypageApi,
  projectAddApi,
  projectDelApi,
  projectUpdateApi,
  projectCheckName
} from '../api/ajax'

const FormItem = Form.Item

class ProjectManage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      isEdit: false,
      confirmLoading: false,
      tableSource: [],
      selectId: null
    }
  }
  componentDidMount() {
    this.loadData()
  }
  loadData = () => {
    projectFindBypageApi().then(v => {
      const {
        list: { results }
      } = v
      _.each(results, v => {
        v.key = v.id
      })
      this.setState({
        tableSource: results ? results : []
      })
    })
  }

  render() {
    const {
      getFieldDecorator,
      resetFields,
      setFieldsValue,
      validateFields,
      setFields
    } = this.props.form
    const {
      isEdit,
      confirmLoading,
      visible,
      tableSource,
      selectId
    } = this.state
    const rules = {
      rules: [
        {
          required: true,
          message: '字符不得为空'
        }
      ]
    }
    const formItemLayout = {
      labelCol: {
        xs: { span: 6 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
    return (
      <div className="home">
        <div className="home-body">
          <div className="home-body-head">
            <h3 className="home-body-head-title">项目列表</h3>
            <Button
              type="primary"
              onClick={() =>
                this.setState({
                  visible: true,
                  isEdit: false
                })
              }
            >
              添加新项目
            </Button>
          </div>
          <Table
            dataSource={tableSource}
            columns={[
              {
                title: '项目名称',
                dataIndex: 'projectName'
              },
              {
                title: '项目单位',
                dataIndex: 'branch'
              },
              {
                title: '项目描述',
                dataIndex: 'discretion'
              },
              {
                title: '操作',
                render: (text, record) => (
                  <span>
                    <button
                      className="button-a"
                      onClick={() => {
                        const { id, projectName, discretion } = record
                        this.setState({
                          visible: true,
                          confirmLoading: false,
                          isEdit: true,
                          selectId: id
                        })
                        setFieldsValue({
                          projectName,
                          discretion
                        })
                      }}
                    >
                      编辑
                    </button>
                    <Divider type="vertical" />
                    <Popconfirm
                      title="是否删除此条记录"
                      onConfirm={() => {
                        const { id } = record
                        projectDelApi({ id }).then(v => {
                          message.success('删除成功')
                          this.loadData()
                        })
                      }}
                      onCancel={() => {}}
                      okText="是"
                      cancelText="否"
                    >
                      <button className="button-a">删除</button>
                    </Popconfirm>
                  </span>
                )
              }
            ]}
          />
        </div>
        <Modal
          title={isEdit ? '编辑' : '新增'}
          visible={visible}
          onOk={() => {
            this.setState({ confirmLoading: true })
            validateFields((errors, values) => {
              if (errors) return
              this.setState({ confirmLoading: true })
              if (isEdit) {
                values.id = selectId
                projectUpdateApi(values).then(v => {
                  message.success('修改成功')
                  resetFields()
                  this.setState({ visible: false, confirmLoading: false })
                  this.loadData()
                })
              } else {
                projectAddApi(values).then(v => {
                  message.success('新增成功')
                  resetFields()
                  this.setState({ visible: false, confirmLoading: false })
                  this.loadData()
                })
              }
            })
          }}
          confirmLoading={confirmLoading}
          onCancel={() => {
            resetFields()
            this.setState({ visible: false, confirmLoading: false })
          }}
        >
          <Form>
            <FormItem label="项目名称" {...formItemLayout}>
              {getFieldDecorator('projectName', rules)(
                <Input
                  autoComplete="off"
                  onBlur={v => {
                    const value = v.target.value
                    projectCheckName({ name: value }).then(data => {
                      if (data) {
                        setFields({
                          projectName: {
                            value: value,
                            errors: [new Error('用户名重复')]
                          }
                        })
                      }
                    })
                  }}
                />
              )}
            </FormItem>
            <FormItem label="项目单位" {...formItemLayout}>
              {getFieldDecorator('branch', rules)(<Input />)}
            </FormItem>
            <FormItem label="项目描述" {...formItemLayout}>
              {getFieldDecorator('discretion')(<Input />)}
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
}

export default Form.create()(ProjectManage)
